<template>
<el-container class="height100">
  <el-header class="header" height="60px">
    <el-row>
      <el-col :span="3">
        <img class="logo" src="~assets/img/login/logo.png" alt="">
      </el-col>
      <el-col :span="1">
        <!-- 左侧导航栏开关 -->
        <img class="menuSwitch" src="~assets/img/home/menuSwitch.png" @click="leftmenuSwitchs">
      </el-col>
      <el-col :span="15">
        <!-- 头部导航栏 -->
        <top-menu></top-menu>
      </el-col>
      <el-col :span="1">
        <div @mouseleave.stop="updateSearch" @mouseenter.stop="updateSearch">
          <img v-show="!searchActive" class="headerSearch" src="~assets/img/home/search.png" alt="">
          <img v-show="searchActive" class="headerSearch" src="~assets/img/home/activeSearch.png" alt="">
        </div>
      </el-col>
      <el-col :span="2">
        {{loginAccount.sitetb.siteName}}
      </el-col>
      <el-col :span="2">
        <el-popover
          placement="bottom"
          width="160"
          trigger="hover"
          v-model="visible">
          <p>注销登录</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="logOut">确定</el-button>
          </div>
          <p slot="reference">管理员:{{loginAccount.empName}}</p>
        </el-popover>
      </el-col>
    </el-row>
  </el-header>
  <el-container>
    <el-aside width="auto">
      <!-- 左侧导航栏 -->
      <left-menu :leftMenuSwitch="leftMenuSwitch"></left-menu>
    </el-aside>
    <el-main class="height100">
      <!-- 页面内容 -->
      <main-page></main-page>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import LeftMenu from 'views/home/components/LeftMenu'
import TopMenu from 'views/home/components/TopMenu'
import MainPage from 'views/home/components/MainPage'

export default {
  name: 'Home',
  data() {
    return {
      leftMenuSwitch: false,
      searchActive: false, 
      loginAccount: JSON.parse(sessionStorage.loginAccount),
      visible: false,
    }
  },
  methods: {
    leftmenuSwitchs() {
      this.leftMenuSwitch = !this.leftMenuSwitch
    },
    updateSearch() {
      this.searchActive = !this.searchActive
    },
    logOut() {
      sessionStorage.removeItem("loginAccount")
      this.$store.commit('removeAccount')
      this.$router.push("/login")
    }
  },
  created() {
    this.$router.push("/home")
    //把所有省市区及网点列表存在vuex里
    this.$store.dispatch('setProvince')
    //获取当前网点的所有运单列表存在vuex里
    this.$store.dispatch('setDocument',JSON.parse(sessionStorage.loginAccount).sitetb.siteName)
    //获取登录账号数据
    this.$store.commit('setAccount',JSON.parse(sessionStorage.loginAccount))
  },
  components: {
    LeftMenu,
    TopMenu,
    MainPage
  }
}
</script>

<style scoped>
.header{
  line-height: 60px;
}
.header .logo{
  /* width: 50px;
  height: 50px; */
  margin-top: 5px;
}
.menuSwitch{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.headerSearch{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>
